import { useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Drawer, message } from 'antd';

import ProTable from '@/components/ProTable';

import useGroupTags from '../hooks/useGroupTags';

import { getColumnsByType } from './constants';
import CrowdExpandAdjustModal from './CrowdExpandAdjustModal';
import GroupTagModal from './GroupTagModal';

const useGetColumnByType = (type, operationRender) => {
  return useMemo(
    () => getColumnsByType(type, operationRender),
    [type, operationRender],
  );
};

const DrawerTitle = ({ title, note }) => {
  return (
    <>
      <p style={{ whiteSpace: 'nowrap' }}>{title}</p>
      <p style={{ fontSize: 11, fontWeight: 'normal' }}>{note}</p>
    </>
  );
};

const TagGroupDrawer = (props) => {
  const {
    currentGroupTagChildren,
    currentGroupTagInfo,
    handleCloseDrawer,
    dimId,
    propsGroupTagInfo,
  } = props;
  const dispatch = useDispatch();
  const [selectedGroupTag, setSelectedGroupTag] = useState();
  const [visible, setVisible] = useState(false);
  const [expandModalVisible, setExpandModalVisible] = useState(false);
  const selectGroupTag = (payload) => {
    dispatch({ type: 'label/selectGroupTag', payload });
  };
  const groupTags = useGroupTags();
  const { dimName, note, type } = currentGroupTagInfo ?? {};
  // 获取最近一次选过的类似的标签  给弹窗一个快捷数据 如果没有 返回原来的
  const getFirstMatchTag = (groupTagInfo) => {
    const { groupId } = groupTagInfo;
    return (
      groupTags.reverse().find((item) => groupId === item.groupId) ||
      groupTagInfo
    );
  };
  const columns = useGetColumnByType(type, (_, groupTagInfo) => {
    return (
      <Button
        type="link"
        onClick={() => {
          const firstMatchTag = getFirstMatchTag(groupTagInfo);
          setSelectedGroupTag(firstMatchTag);
          if (groupTagInfo.customType === 1)
            // 无须弹窗
            message.success('添加标签成功');
          else if (groupTagInfo.customType === 2)
            // 扩展标签，需要弹扩展弹窗
            setExpandModalVisible(true);
          else setVisible(true);
        }}
      >
        添加
      </Button>
    );
  });

  if (!currentGroupTagInfo && !propsGroupTagInfo) return null;

  return (
    <>
      {currentGroupTagChildren && (
        <Drawer
          title={<DrawerTitle title={dimName} note={note} />}
          open={Boolean(currentGroupTagInfo)}
          width={600}
          closable={false}
          bodyStyle={{ padding: '0' }}
          onClose={handleCloseDrawer}
          extra={
            <Button
              type="link"
              href="https://wiki.in.zhihu.com/pages/viewpage.action?pageId=231183049"
              target="_blank"
            >
              DMP 标签口径详情
              <QuestionCircleOutlined />
            </Button>
          }
        >
          <ProTable
            sticky={false}
            cardProps={{
              bodyStyle: { padding: '0' },
            }}
            columns={columns}
            dataSource={currentGroupTagChildren}
            search={false}
            options={false}
            revalidateOnFocus={false}
          />
        </Drawer>
      )}
      <GroupTagModal
        visible={visible}
        onClose={() => setVisible(false)}
        groupTagInfo={selectedGroupTag}
        clearGroupTagInfo={() => setSelectedGroupTag(null)}
        selectGroupTag={selectGroupTag}
        dimId={dimId}
        propsGroupTagInfo={propsGroupTagInfo}
      />
      <CrowdExpandAdjustModal
        visible={expandModalVisible}
        onClose={() => setExpandModalVisible(false)}
        groupTagInfo={selectedGroupTag}
        clearGroupTagInfo={() => setSelectedGroupTag(null)}
        selectGroupTag={selectGroupTag}
        dimId={dimId}
        propsGroupTagInfo={propsGroupTagInfo}
      />
    </>
  );
};

export default TagGroupDrawer;
